<template>
    <div :style="{ padding: `${token.marginXXS}px 0 0 0` }"
        :class="{ onDrag: DragState, onActive: DragActiveItem == Config.id }" :data-treecomp-id="Config.id">
        <div class="TreeCompNameBox" :style="{
            paddingLeft: level * 16 + 'px',
            background: Hover ? token.colorFillSecondary : '',
            borderRadius: token.borderRadius + 'px',
            borderColor: DragActiveItem == Config.id ? token.colorBorder : ''
        }" @mouseover="() => { Hover = true }" @mouseleave="() => { Hover = false }">
            <div style="display: flex;align-items: center;">
                <div class="Icon" :class="{ open: State }" :style="{
                    marginLeft: token.marginXXS + 'px'
                }"></div>
                <div class="Name" :style="{
                    color: TextColor,
                    fontSize: token.fontSizeLG + 'px',
                    lineHeight: token.lineHeightLG
                }">
                    {{ Config.originalTitle }}
                    {{ Config.children && Config.children.length > 0 ? '' : ' (空)' }}
                </div>
                <div class="Option" :style="{ opacity: Hover ? 1 : 0 }">
                    <a-dropdown :trigger="['click']">
                        <a-button type="text" v-if="!DragState" :icon="h('span', {
                            class: 'iconfont icon-shezhi', style: {
                                color: token.colorTextSecondary
                            }
                        })" @mouseup.stop @mousedown.stop />
                        <template #overlay>
                            <a-menu>
                                <a-menu-item>
                                    <a href="javascript:;" :style="{ color: token.colorTextSecondary }">修改名称</a>
                                </a-menu-item>
                                <!-- <a-menu-item>
                                    <a href="javascript:;" :style="{ color: token.colorTextSecondary }">另存为</a>
                                </a-menu-item> -->
                                <a-menu-divider />
                                <a-menu-item>
                                    <a href="javascript:;" :style="{ color: token.colorTextSecondary }">隐藏PC端</a>
                                </a-menu-item>
                                <a-menu-item>
                                    <a href="javascript:;" :style="{ color: token.colorTextSecondary }">隐藏移动端</a>
                                </a-menu-item>
                                <a-menu-divider />
                                <a-menu-item>
                                    <a href="javascript:;" :style="{ color: token.colorError }">删除</a>
                                </a-menu-item>
                            </a-menu>
                        </template>
                    </a-dropdown>
                </div>
            </div>
        </div>
    </div>
    <div class="ChildBox" style="height:0" ref="ChildBox" v-if="Config.children && Config.children.length > 0">
        <slot name="Child" v-for=" item in Config.children " :Config="item"></slot>
    </div>
</template>

<script setup>
import { ref, watch, inject, h, computed } from 'vue'
import { theme } from 'ant-design-vue';

const { token } = theme.useToken();

const DragState = inject('DragState');
const SetChildItem = inject('SetChildItem');
const DragActiveItem = inject('DragActiveItem');

const State = ref(false);
const Hover = ref(false);
const props = defineProps(['Config', 'level'])

const ChildBox = ref();


const TextColor = computed(() => {
    if (Hover.value) {
        return token.value.colorTextSecondary
    } else {
        return token.value.colorTextSecondary
    }
})


const ClickEvent = function () {
    State.value = !State.value
};
const OpenFolder = function () {
    if (DragActiveItem.value == props.Config.id) return;
    State.value = true;
}

watch(DragActiveItem, val => {
    if (val == props.Config.id) {
        State.value = false;
    }
})

const CloseFolder = function () {
    State.value = false;
}

SetChildItem(props.Config.id, {
    ClickEvent,
    OpenFolder,
    CloseFolder,
})

watch(State, value => {
    if (!ChildBox.value) return;
    if (value) {
        ChildBox.value.style.height = ChildBox.value.scrollHeight + 'px';
        setTimeout(() => {
            ChildBox.value.style.height = 'auto'
        }, 300)
    } else {
        ChildBox.value.style.height = ChildBox.value.scrollHeight + 'px';
        setTimeout(() => {
            ChildBox.value.style.height = '0px'
        }, 1)
    }
});

// setTimeout(() => {
//     State.value = true;
// }, 10)




</script>

<style lang="less" scoped>
.onActive {
    pointer-events: none;
    opacity: 0.5;
}

.onDrag * {
    pointer-events: none;
}

.empty {
    height: 2em;
    text-indent: 3em;
}

.ChildBox {
    overflow: hidden;
    transition: height 0.2s;
}

.TreeCompNameBox {
    font-size: 16px;
    cursor: pointer;
    user-select: none;

    border: 2px dashed transparent;

    .Name {
        margin: 0;
        padding: 5px;
        overflow: hidden;
        width: 100%;
        line-height: 32px;
    }

    .Icon {
        flex: none;
        width: 32px;
        height: 32px;
        background-image: url(./folder.png);
        background-size: 65%;
        background-repeat: no-repeat;
        background-position: 5px 5px;

        &.open {
            background-image: url(./folder_open.png);
        }
    }

    .Option {
        flex: none;
        width: 32px;
        height: 32px;
        margin-left: -1px;
        text-align: center;
    }
}
</style>